  <template>
  <div id="main">
    <el-card class="add-box-card" :body-style="{height:'calc(100% - 76px)',overflow:'auto',display:'flex'}">
      <div slot="header" class="box-card-title">
        <span>添加用户信息</span>
      </div>

      <el-form size="small" :model="addMemberFormData" class="edit-form less-margin-form" label-width="100px" label-position="right" :rules="rules" ref="ruleForm" >
        <el-form-item label="身份权限：" prop="role">
          <el-select class="add-input" v-model="addMemberFormData.role" placeholder="请选择身份">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓　　名：" prop="name">
          <el-input class="add-input" v-model="addMemberFormData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
         <el-form-item label="系统账号：" prop="account">
          <el-input class="add-input" v-model="addMemberFormData.account" placeholder="请输入系统账号"></el-input>
        </el-form-item>
       
        <el-form-item label="年　　龄：" prop="age">
          <el-input class="add-input" v-model="addMemberFormData.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="居住地址：" prop="address">
          <el-input class="add-input" v-model="addMemberFormData.address" placeholder="请输入居住地址"></el-input>
        </el-form-item>
        <el-form-item label="目前岗位：" prop="job">
          <el-input class="add-input" v-model="addMemberFormData.job" placeholder="请输入目前岗位"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="tel" >
          <el-input class="add-input" v-model="addMemberFormData.tel" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="设置密码：" prop="password">
          <el-input class="add-input" v-model="addMemberFormData.password" placeholder="请设置密码"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="footer">
      <el-button @click="submit('ruleForm')" class="greenButton" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      addMemberFormData: {
        role:"",
        name: "",
        tel: "",
        age: "",
        address: "",
        job: "",
        account: "",
        password: ""
      },
      rules:{
        name:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        account:[
          { required: true, message: '请输入系统账号', trigger: 'blur' },
        ],
        tel:[
          { required: true, message: '请输入联系电话', trigger: 'blur' },
        ],
        password:[
          { required: true, message: '请设置密码', trigger: 'blur' },
        ],
        role:[
          { required: false},
        ],
        age:[
          { required: false},
        ],
        address:[
          { required: false},
        ],
        job:[
          { required: false},
        ],
      },
      roleOptions: [],
      userStatus:'',
    };
  },
  created(){
      // roleOptions
    let userStatus = localStorage.getItem('userSatus')
    if(userStatus==0||userStatus==3){
      this.roleOptions = [
        {
          value: 1,
          label: "巡检人员"
        },
        {
          value: 2,
          label: "维修人员"
        }
      ]
    }else if(userStatus==4){
      this.roleOptions = [
        {
          value: 2,
          label: "维修人员"
        }
      ]
    }else if(userStatus==4||userStatus==5){
      this.roleOptions = [
        {
          value: 1,
          label: "巡检人员"
        },
      ]
    }
  },
  methods:{
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    submit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addMemberFormData.tel == ''){
              this.$message({
                                  message: '请输入手机号',
                                  type: 'error',
                                  duration:'2000'
                                });
                                return

            }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.addMemberFormData.tel))){
              this.$message({
                                  message: '手机号格式不对',
                                  type: 'error',
                                  duration:'2000'
                                });
                                return

            } else if(this.addMemberFormData.account == ''){
                 this.$message({
                                      message: '请输入工号',
                                      type: 'error',
                                      duration:'2000'
                                    });
                                   return

            }else if(this.addMemberFormData.u_name == ''){
                  this.$message({
                           message: '请输入姓名',
                             type: 'error',
                             duration:'2000'
                           });
                           return                         
            }else if(this.addMemberFormData.password == ''){
                   this.$message({
                                       message: '请输入密码',
                                       type: 'error',
                                       duration:'2000'
                                     });
                                     return

            }else{
              let param = {
                u_name:this.addMemberFormData.name,
                u_age:this.addMemberFormData.age,
                u_post:this.addMemberFormData.job,
                u_tel:this.addMemberFormData.tel,
                u_pass:this.addMemberFormData.password,
                u_address:this.addMemberFormData.address,
                u_account :this.addMemberFormData.account,
                u_status:this.addMemberFormData.role
              }
              console.log(param)
              this.ajaxCommon.ajax({
                  url: 'ADMINuser',
                  method: 'post',
                  data:param,
                  success: (res)=>{
                     console.log('成功',res);
                     if(res.code == 200){
                       this.$message({
                                    message: '添加成功',
                                    type: 'success',
                                    duration:'2000'
                                  });
                        this.resetForm('ruleForm')
                     }else{
                        this.$message({
                                    message: res.status,
                                    type: 'error',
                                    duration:'2000'
                                  });
                     }
                  }
                });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
      });
      // if(this.addMemberFormData.tel == ''){
      //   this.$message({
      //                       message: '请输入手机号',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return
           
      // }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.addMemberFormData.tel))){
      //   this.$message({
      //                       message: '手机号格式不对',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return

      // }
      // else if(this.addMemberFormData.account == ''){
      //   this.$message({
      //                       message: '请输入工号',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return

      // }else if(this.addMemberFormData.u_name == ''){
      //   this.$message({
      //                       message: '请输入姓名',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return                         
      
      // }else if(this.addMemberFormData.password == ''){
      //   this.$message({
      //                       message: '请输入密码',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return

      // }else{
      //   let param = {
      //   u_name:this.addMemberFormData.name,
      //   u_age:this.addMemberFormData.age,
      //   u_post:this.addMemberFormData.job,
      //   u_tel:this.addMemberFormData.tel,
      //   u_pass:this.addMemberFormData.password,
      //   u_address:this.addMemberFormData.address,
      //   u_account :this.addMemberFormData.account,
      //   u_status:this.addMemberFormData.role
      // }
      // console.log(param)
      // this.ajaxCommon.ajax({
      //     url: 'ADMINuser',
      //     method: 'post',
      //     data:param,
      //     success: (res)=>{
      //        console.log('成功',res);
      //        if(res.code == 200){
      //          this.$message({
      //                       message: '添加成功',
      //                       type: 'success',
      //                       duration:'2000'
      //                     });
      //        }else{
      //           this.$message({
      //                       message: res.status,
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //        }
      //     }
      //   });


      // }
      
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  .add-box-card {
    border: 1px solid #00bdac;
    box-shadow: 0px 4px 16px 0px rgba(0, 201, 212, 0.14);
    height: 480px;
    .box-card-title {
      background-color: #00bdac;
      height: 36px;
      line-height: 36px;
      padding-left: 30px;
      font-size: 14px;
      color: #ffffff;
    }

    .edit-form {
      width: 50%;
      margin: 0 auto;
      .add-green-text {
        display: inline-flex;
        color: #00bdac;
        width: 140px;
        justify-content: space-between;
        align-items: center;
        vertical-align: bottom;
        margin-left: 14px;
        cursor: pointer;

        img {
          width: 22px;
          height: 22px;
        }
      }
    }
  }

  .add-input {
    width: 260px;
  }

  .add-sign-input {
    width: 180px;
  }

  .footer {
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }
}
</style>

<style lang="less">
.add-box-card {
  .el-card__header {
    padding: 0;
  }
}
</style>
